<template>
  <div class="universe-cards">
    <div class="universe-card our-universe">
      <div class="universe-icon">🌍</div>
      <h3>我们的宇宙</h3>
      <div class="original">{{ original }}</div>
    </div>
    <div class="universe-card anti-universe">
      <div class="universe-icon">🌌</div>
      <h3>平行宇宙</h3>
      <div class="anti-version">
        {{ antiVersion }}
        <div v-if="credibility !== null" class="credibility-meter">
          <div class="meter-fill" :style="{width: (credibility * 100) + '%'}" :class="getCredibilityClass(credibility)"></div>
          <span class="credibility-text">可信度: {{ (credibility * 100).toFixed(0) }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    original: {
      type: String,
      required: true
    },
    antiVersion: {
      type: String,
      required: true
    },
    credibility: {
      type: Number,
      default: null
    }
  },
  methods: {
    getCredibilityClass(credibility) {
      if (credibility >= 0.8) return 'high';
      if (credibility >= 0.6) return 'medium';
      return 'low';
    }
  }
}
</script>

<style scoped>
.universe-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.universe-card {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
}

.universe-card:hover {
  transform: translateY(-5px);
}

.universe-card.our-universe {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.universe-card.anti-universe {
  background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
}

.universe-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.credibility-meter {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.meter-fill.high {
  background-color: #4CAF50;
}

.meter-fill.medium {
  background-color: #FFC107;
}

.meter-fill.low {
  background-color: #F44336;
}

.credibility-text {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  color: #757575;
}
</style>